<template>
  <div>
       <!--data:展示的数据
           default-expand-all 默认展开所有项，我们不需要
           :tree-props="{ children: '用哪个字段判断该数据是否有子节点' }" -->
    <el-table :data="list" style="width: 100%" row-key="id" border :tree-props="{children :'children'}">

      <el-table-column prop="id" label="菜单编号"></el-table-column>
      <el-table-column prop="title" label="菜单名称"></el-table-column>

      <el-table-column  label="菜单图标">
          <template slot-scope="scope">
              <i :class="scope.row.icon"></i>
          </template>
      </el-table-column>

      <el-table-column prop="url" label="菜单地址"></el-table-column>

      <el-table-column label="状态">
          <template slot-scope="scope">
             <el-button type="primary" v-if="scope.row.status == 1">启用</el-button>
             <el-button type="default" v-else>禁用</el-button>
          </template>
      </el-table-column>

      <el-table-column label="操作">
           <template slot-scope="scope">
                <el-button type="primary" size="mini"  @click="willEdit(scope.row.id)">编辑</el-button>
                <el-button type="danger"  size="mini"  @click="del(scope.row.id)">删除</el-button>
           </template>
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { reqmenudelete } from "../../../https/api";
import { successAlert } from '../../../utils/alert';
export default {
  props: ["list"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters({}),
  },
  methods: {
    ...mapActions({}),
    // 删除
    del(id){
        this.$confirm("亲 不再考虑考虑?", "三思而行",{
            configmButtonText:"确定",
            cancelButtonText:"取消",
            type:"warning",
        })
        .then(res=>{
            reqmenudelete({id:id}).then((res)=>{
                if(res.data.code == 200){
                    // 弹成功
                    successAlert(res.data.msg)
                    // 刷新表
                    this.$emit("init")
                }
            });
        })
        .catch(()=> {
            this.$message({
                type:"info",
                message:"取消删除",
            });
        });
    },
    // 点击编辑按钮
    willEdit(id){
        // console.log(1);
        // 通知父组件去编辑 通过id通知具体哪一条
        this.$emit("willEdit",id);
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "../../../less/index.less";
</style>